<template>
  <el-row>
    <el-col :span="24">
      <el-select placeholder="选择内容提供方" clearable size="mini" class="input-w mr10" v-model="queryList.cpid"
                 @change="handleFilterData">
        <el-option
          v-for="cp in cpDataList"
          :key="cp.cpid"
          :label="cp.name"
          :value="cp.cpid"
        />
      </el-select>
      <el-button type="primary" size="mini" @click="handleFilterData">
        <el-icon>
          <search />
        </el-icon>
        搜索
      </el-button>
    </el-col>
  </el-row>
    <el-table ref="tableref"  class="mt10" :data="tableData.listData" v-loading="isloading" border :height="tableHeight">
      <el-table-column label="任务ID" prop="taskid" width="80" />
      <el-table-column label="内容提供方" show-overflow-tooltip>
        <template #default="{row}">
          {{cpDataObj[row.cpid] ? cpDataObj[row.cpid] : '-'}}
          {{'( '+ row.cpid +' )'}}
        </template>
      </el-table-column>
      <el-table-column label="数据类型" prop="datatype" />
      <el-table-column label="操作类型">
        <template #default="{row}">
          <span v-if="row.method == 'post'">创建</span>
          <span v-else-if="row.method == 'put'">全量更新</span>
          <span v-else-if="row.method == 'patch'">部分更新</span>
          <span v-else-if="row.method == 'delete'">删除</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="审核状态">
        <template #default="{row}">
          <span v-if="row.state == 0">未提交审核</span>
          <span v-else-if="row.state == 1">审核中</span>
          <span v-else-if="row.state == 2">审核通过</span>
          <span v-else-if="row.state == 3">审核失败</span>
          <span v-else-if="row.state == 4">免审</span>
          <span v-else>未知状态</span>
        </template>
      </el-table-column>
      <el-table-column label="是否完成" width="80">
        <template #default="{row}">
          <span v-if="row.isfinish == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column label="完成时间">
        <template #default="{row}">
          {{row.finishtime ? row.finishtime.replace('T', ' ') : '-'}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template #default="{row}">
          {{row.ctime ? row.ctime.replace('T', ' ') : '-'}}
        </template>
      </el-table-column>
    </el-table>
    <el-row>
    <el-col :span="24" class="mt10">
      <table-pagination
              :query-list="queryList"
              :total="tableData.total"
              @pagination="getDataList"
      />
    </el-col>
  </el-row>
</template>

<script>
  import {ref, reactive,onMounted} from 'vue'
  import TablePagination from "../public/TablePagination";
  import {getCpTask, getCps} from "@/api/cp";
  import {Search} from '@element-plus/icons'

  export default {
    name: "task",
    components: {TablePagination, Search},
    setup() {
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        cpid: undefined
      })
      const isloading = ref(false)
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const cpDataList = ref([])
      const cpDataObj = reactive({})

      //table高度自适应
      const tableref=ref(null)
      const tableHeight=ref()
      onMounted( () => {
        tableHeight.value =
        window.innerHeight - tableref.value.$el.offsetTop - 80;
      })
      /** 获取数据列表 **/
      const getDataList = () => {
        isloading.value = true
        getCpTask(queryList).then(response => {
          isloading.value = false
          if (response.errcode == 0) {
            const {total, lists} = response.data
            tableData.total = total
            tableData.listData = lists
          }
        })
      }
      /** 获取内容提供方列表 **/
      const getCpList = () => {
        getCps({page: 1, pagesize: 1000}).then(response => {
          if (response.errcode == 0) {
            cpDataList.value = response.data.list
            cpDataList.value.forEach(row => {
              cpDataObj[row.cpid] = row.name
            })
          }
        })
      }
      /** 过滤数据 **/
      const handleFilterData = () => {
        queryList.page = 1
        getDataList()
      }

      const init = () => {
        getCpList()
        getDataList()
      }
      init()

      return {
        queryList,
        isloading,
        tableData,
        getDataList,
        cpDataObj,
        cpDataList,
        handleFilterData,
        tableref,
        tableHeight
      }
    }
  }
</script>

<style scoped>

</style>
